<template>
    <div>
        <h2 align="center">理疗项目列表</h2>
        食谱标题:<input type="text"  v-model="info.name">
        <input type="button" value="查询" class="btn btn-info" @click="show">
        <input type="button" value="导出" class="btn btn-success" @click="down">
        <input type="button" value="批量启用" class="btn btn-primary" @click="upstate(1)">
        <input type="button" value="批量禁用" class="btn btn-danger" @click="upstate(2)">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type='checkbox'  @change="all" v-model="checked"></td>
                    <td>理疗项目编号</td>
                    <td>理疗项目名称</td>
                    <td>理疗项目状态</td>
                    <td>服务人数</td>
                    <td>服务时长(小时)</td>
                    <td>操作</td>
                </tr>
                 <tr v-for="i in data.list" :key="i.shopId" >
                    <td><input type='checkbox'  @change="notall" v-model="ids" :value="i.shopId"></td>
                    <td>{{ i.num }}</td>
                    <td>{{ i.shopName }}</td>
                    <td>{{ i.state==1?"启用":"禁用" }}</td>
                    <td>{{ i.people }}</td>
                    <td>{{ i.time }}</td>
                    <td><input type="button" value="删除" class="btn btn-info" @click="del(i.shopId)"></td>
                </tr>
            </tbody>
        </table>
        <div>
            <!-- 共N数，每页N条，共M/N页，首页 上一页 页序号 下一页 尾页 -->
            <span>共{{ data.totalcount }}条,</span>
            <span>每页{{ info.pagesize }}条，</span>
            <span>共{{ info.pageindex }}/{{ data.totalpage }}页</span>

            <input type="button" value="首页" @click="gochange(1)">
            <input type="button" value="上一页" @click="gochange(info.pageindex-1)">
            <input type="button" v-for="i in data.totalpage" :value="i" @click="gochange(i)">
            <input type="button" value="下一页" @click="gochange(info.pageindex+1)">
            <input type="button" value="尾页" @click="gochange(data.totalpage)">
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref,reactive,onMounted } from "vue";

let data:any=reactive({
    totalcount:0,
    totalpage:0,
    list:[]
})

let info:any=reactive({
    name:'',
    pageindex:1,
    pagesize:3,
})


let checked:any=ref(false)

let ids:any=ref([])


onMounted(()=>{
    show();
})

const down=()=>{
    location.href=`https://localhost:7210/api/Shop/ExcelPort?pageindex=1&pagesize=100`;
}

const upstate=(state:any)=>{
   
    axios({
    url:"https://localhost:7210/api/Shop/UpdState",
    method:'get',
    params:{ids:ids.value.toString(),state:state}
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
        {
            alert("修改成功");
            show();
            return;
        }
        else
        {
            alert("修改失败");
            return
        }
    })
    .catch((err)=>{
         console.log(err);
    })
}


const all=()=>{
    if(checked.value==true)
    {
        ids.value=data.list.map((i:any)=>{
            return i.shopId;
        })
    }
    else
    {
        ids.value=[];
    }
}

const notall=()=>{
    if(ids.value.length==data.list.length)
    {
       checked.value=true;
    }
    else
    {
        checked.value=false;
    }
}


const del=(id:any)=>{
    let f =(confirm("确认删除吗?"))
    if(f)
    {
        axios({
        url:"https://localhost:7210/api/Shop/Del",
        method:'get',
        params:{id:id}
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
        {
            alert("删除成功");
            show();
            return;
        }
        else
        {
            alert("删除失败");
            return
        }
    })
    .catch((err)=>{
         console.log(err);
    })
    }
}

const gochange=(num:any)=>{
    if(num<1)
    {
        info.pageindex=1;
        return;
    }
    if(num>data.totalpage)
    {
        info.pageindex=data.totalpage;
        return;
    }
    info.pageindex=num;
    show();
    return;
}


const show=()=>{
   
    axios({
        url:"https://localhost:7210/api/Shop/ShowShop",
        method:'get',
        params:info 
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data);
    })
    .catch((err)=>{
         console.log(err);
    })
}


</script>

<style scoped>

</style>